import {onMounted, watch, ref} from "vue";
import echartsUtil from "@/commons/utils/echartsUtil";
import NumberUtil from "@/commons/utils/numberUtil";
import TextUtil from "@/commons/utils/TextUtil";

export default function useMyChartOperate(myChart, dbData, filterOption) {
    let myChartInstance;
    let myChartOption;
    const seriesOption = ref({});
    const nsDict = {
        cum: 'Cum',
        month: '',
    }

    const setSeriesOption = () => {
        let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
        let sk = dbData.value.filter(item => item.portNameCn === '蛇口集装箱码头有限公司');
        let cw = dbData.value.filter(item => item.portNameCn === '赤湾集装箱码头有限公司');
        let zs = dbData.value.filter(item => item.portNameCn === '招商港务（深圳）有限公司');

        seriesOption.value = {
            titleText: '南山港当年月货物吞吐量',
            legendData: ['南山', '蛇口', '赤湾', '招商港务', '南山增速', '蛇口增速', '赤湾增速', '招商港务增速'],
            xAxisData: ns.map(item => TextUtil.getTimeLabel(filterOption.time, item)),
            yAxisName: ['吞吐量(万TEU)', '增速/占比'],
            seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line', 'line'],
            yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                {normal: {color: '#33EEFFFF'}},
                {normal: {color: '#FFE34DFF'}},
                {normal: {color: '#BAF318FF'}},
                {normal: {color: '#E1D074FF'}},
                {normal: {color: '#fd003a'}},
            ],
            seriesData: [
                ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Thr']/10000, 2)),
                sk.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Thr']/10000, 2)),
                cw.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Thr']/10000, 2)),
                zs.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Thr']/10000, 2)),
                ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Growth'], 2)),
                sk.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Growth'], 2)),
                cw.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Growth'], 2)),
                zs.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Growth'], 2)),
                // ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.stats] + 'Growth'], 2)),
            ],
            seriesArray: []
        }

        seriesOption.value.legendData.forEach((item, index) => {
            seriesOption.value.seriesArray.push({
                name: item,
                yAxisIndex: seriesOption.value.yAxisIndex[index],
                type: seriesOption.value.seriesType[index],
                data: seriesOption.value.seriesData[index],
                itemStyle: seriesOption.value.itemStyle[index]
            })
        })
    }
    const setMyChartOptionData = () => {
        myChartOption = {
            backgroundColor: 'rgba(11,32,53,0)',
            textStyle: {
                color: '#FFFFFF',
                opacity: 0.85
            },
            title: {
                // text: '世界港口集装箱吞吐量排名',
                text: seriesOption.value.titleText,
                textStyle: {
                    color: '#38E5DE',
                    fontSize: '26px',
                    opacity: 1
                },
                subtext: seriesOption.value.subText,
                subtextStyle: {
                    color: '#ff6666',
                    fontSize: '16px',
                    opacity: 1
                }
                // subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                textStyle: {
                    fontSize: 16
                }
            },
            legend: {
                show: true,
                data: seriesOption.value.legendData,
                top: 'bottom',
                itemWidth: 20,
                textStyle: {
                    fontSize: 16,
                    color: '#FFFFFF',
                    opacity: 0.85
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '8%',
                top: '100',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: seriesOption.value.xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        interval: 0
                    }
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: seriesOption.value.yAxisName[0],
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: "center",
                        fontSize: 16
                    }
                },
                {
                    type: 'value',
                    name: seriesOption.value.yAxisName[1],
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisPointer: {
                        type: "line"
                    },
                    nameTextStyle: {
                        fontSize: 16
                    }
                }
            ],
            dataZoom: [{
                type: "inside"
            }],
            series: seriesOption.value.seriesArray
        };
    }
    const setMyChartOption = () => {
        setSeriesOption()
        setMyChartOptionData()
        myChartInstance.setOption(myChartOption, true);
    }

    onMounted(() => {
        myChartInstance = echartsUtil.initMyChart(myChart.value)
    })

    watch(dbData, setMyChartOption)

    return {
        myChartInstance,
        setMyChartOption
    }
}